<template>
  <div class="login-container">
    <div class="login-header"></div>

    <div class="login-content">
      <el-card class="w-[350px]">
        <template #header>
          <div class="login-card-header">
            <span>用户登录</span>
          </div>
        </template>
        <!--卡片的body  表单里面的数据全部都是对象里面的数据-->
        <!-- ref设置后，在script中能使用this.$refs拿到对应的对象，用于验证和reset表单数据 -->
        <el-form
          :model="loginData"
          :rules="loginDataRules"
          ref="loginFormRef"
          @keyup.enter="submitForm"
        >
          <!--这里的prop要跟rules里面的规则名对其用来校验规则-->
          <el-form-item prop="username">
            <!--prefix-icon="UserFilled"图标做了全局引入，这里就不需要引入了-->
            <!--v-model.trim 其实双向绑定了loginData.username  trim其实就是去掉空格-->
            <!--placeholder 默认文字提示   placeholde 清除按钮-->
            <el-input
              prefix-icon="UserFilled"
              v-model.trim="loginData.username"
              maxlength="32"
              placeholder="请输入账号"
              clearable
            >
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              type="password"
              prefix-icon="Lock"
              v-model.trim="loginData.password"
              maxlength="16"
              placeholder="请输入密码"
              clearable
            >
            </el-input>
          </el-form-item>

          <el-form-item>
            <!-- :loading="loginLoading" -->
            <el-button
              type="primary"
              style="width: 100%; border-radius: 5px"
              @click="submitForm('loginData')"
              >登入</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <div class="login-footer"></div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ENotice, EMsg } from "@/utils/tool";
import { useUserStore } from "@/pinia/user";
import { storeToRefs } from "pinia";
import router from "@/router";

// 验证函数
const checkUsername = (rule, value, callback) => {
  if (value.length < 1) {
    return callback(new Error("请输入正确的用户名"));
  } else {
    callback();
  }
};
const checkPassword = (rule, value, callback) => {
  if (value.length < 1) {
    return callback(new Error("请输入正确的密码"));
  } else {
    callback();
  }
};

const loginData = reactive({
  username: "admin",
  password: "11",
});

// 登录规则
const loginDataRules = reactive({
  username: [{ validator: checkUsername, trigger: "blur" }],
  password: [{ validator: checkPassword, trigger: "blur" }],
});

const UserStore = useUserStore();
const { loginLoading } = storeToRefs(UserStore);
const userLogin = async () => {
  return await UserStore.Login(loginData);
};

const loginFormRef = ref(null);
const submitForm = () => {
  loginFormRef.value.validate(async (v) => {
    if (!v) {
      // 未通过前端静态验证
      EMsg("请正确填写登录信息");
      return false;
    }
    // 通过验证，请求登陆
    const flag = await userLogin();

    // 登陆失败，刷新验证码
    if (!flag) {
      ENotice("登录失败", "error");
      return false;
    }

    // 登陆成功
    ENotice("登录成功", "success");
    router.push("/home");
    return true;
  });
};
</script>

<style scoped>
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow-y: auto;
  width: 100%;
  height: 100%;

  .login-header {
    display: flex;
    width: 100%;
    height: 120px;
  }

  .login-content {
    display: flex;
  }
}
</style>
